<!--
 * @Description: 报名字段管理
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-05-05 10:12:48
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->
<template>
    <div class="lb-examine-goods">
        <top-nav />
        <div class="page-main">
            <el-row class="page-top-operate">
                <lb-button type="primary" icon="el-icon-plus" @click="toShowDialog">新增字段</lb-button>
            </el-row>
            <el-row class="page-search-form">
                <el-form @submit.native.prevent :inline="true" :model="searchForm" ref="searchForm">
                    <el-form-item label="输入查询" prop="name">
                        <el-input v-model="searchForm.title" placeholder="请输入字段名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <lb-button size="medium" type="primary" icon="el-icon-search" style="margin-right: 5px"
                            @click="getTableDataList(1)">{{ $t('action.search') }}</lb-button>
                        <!-- <lb-button size="medium" icon="el-icon-refresh-left" style="margin-right: 5px"
                            @click="resetForm('searchForm')">{{ $t('action.reset') }}</lb-button> -->
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table v-loading="loading" :data="tableData"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%">
                <el-table-column prop="id" label="ID"></el-table-column>

                <el-table-column prop="sort" label="排序"></el-table-column>
                <el-table-column prop="title" label="字段名称"></el-table-column>


                <el-table-column prop="create_time" label="创建时间">
                    <template slot-scope="scope">
                        <p>{{ scope.row.create_time | handleTime(1) }}</p>
                        <p>{{ scope.row.create_time | handleTime(2) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div class="table-operate">
                            <lb-button size="mini" plain type="primary" @click="toShowDialog(scope.row)">{{
                                $t('action.edit') }}</lb-button>
                            <!-- <lb-button size="mini" plain type="danger" @click="confirmDel(scope.row.id)"
                >{{ $t('action.delete') }}</lb-button> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <lb-page :batch="false" :page="searchForm.page" :pageSize="searchForm.limit" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      </lb-page> -->
        </div>

        <el-dialog :title="$t(subForm.id ? 'menu.ActivityClassifyEdit' : 'menu.ActivityClassifyAdd')
            " :visible.sync="showDialog" width="500px" center>
            <el-form class="dialog-form" :model="subForm" ref="subForm" :rules="subFormRules" label-width="100px">
                <el-form-item label="字段名" prop="title">
                    <el-input v-model="subForm.title" maxlength="5" show-word-limit placeholder="请输入字段名"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input-number class="lb-input-number" :min="0" :controls="false" v-model="subForm.sort"
                        placeholder="请输入排序值"></el-input-number>
                    <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitFormInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    data() {
        return {
            loading: false,
            searchForm: {
                page: 1,
                limit: 10,
                title: ''
            },
            tableData: [],
            total: 0,
            count: {},
            showDialog: false,
            subForm: {
                id: 0,
                title: '',
                sort: 0
            },
            subFormRules: {
                title: { required: true, validator: this.$reg.isNotNull, text: '字段名', reg_type: 2, trigger: 'blur' },
                sort: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
            }
        }
    },
    // activated () {
    //   this.getTableDataList(1)
    // },
    created() {
        this.getTableDataList(1)
    },
    methods: {
        resetForm(form) {
            this.$refs[form].resetFields()
            this.getTableDataList(1)
        },
        handleSizeChange(val) {
            this.searchForm.limit = val
            this.handleCurrentChange(1)
        },
        handleCurrentChange(val) {
            this.searchForm.page = val
            this.getTableDataList()
        },
        async toChange(index) {
            this.searchForm.status = index
            this.getTableDataList(1)
        },
        async getTableDataList(flag) {
            if (flag) this.searchForm.page = 1
            this.tableData = []
            this.loading = true
            let { code, data } = await this.$api.service.activityItemList(this.searchForm)
            this.loading = false
            if (code !== 200) return
            this.tableData = data
            //   this.total = data.total
        },
        async submitFormInfo() {
            let flag = true
            this.$refs['subForm'].validate(valid => {
                if (!valid) flag = false
            })
            if (flag) {
                let subForm = JSON.parse(JSON.stringify(this.subForm))
                let methodModel = subForm.id ? 'activityItemUpdate' : 'activityItemAdd'
                let { code } = await this.$api.service[methodModel](subForm)
                if (code !== 200) return
                this.$message.success(this.$t('tips.successSub'))
                this.showDialog = false
                this.getTableDataList()
            }
        },
        async toShowDialog(data = {}) {
            let item = {
                title: '',
                sort: 0
            }
            if (data.id) {
                item = JSON.parse(JSON.stringify(data))
            }
            // if (id) {
            //     let { data } = await this.$api.service.cateInfo({ id })
            //     data.cover = [{ url: data.cover }]
            //     item = data
            // }
            for (let key in this.subForm) {
                this.subForm[key] = item[key]
            }
            this.showDialog = true
        },
        confirmDel(id) {
            this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
                confirmButtonText: this.$t('action.comfirm'),
                cancelButtonText: this.$t('action.cancel'),
                type: 'warning'
            })
                .then(() => {
                    this.updateItem(id, -1)
                })
                .catch(() => { })
        },
        async updateItem(id, status) {
            this.$api.service.serviceUpdate({ id, status }).then((res) => {
                if (res.code === 200) {
                    this.$message.success(
                        this.$t(status === -1 ? 'tips.successDel' : 'tips.successOper')
                    )
                    if (status === -1) {
                        this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
                        this.getTableDataList()
                    }
                } else {
                    if (status === -1) return
                    this.getTableDataList()
                }
            })
        }
    },
    filters: {
        handleTime(val, type) {
            let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
            return time
        }
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    .table-goods-info {
        width: 280px;
        height: 80px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 12px;

        .goods-info-r {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            p {
                width: 210px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .price {
                color: red;
            }
        }

        .el-image {
            min-width: 70px;
            height: 70px;
            margin-right: 10px;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>
